<script>
import { selectMajorList, deleteMajorList } from '@/api/admin/major'
import { Search, Plus } from '@element-plus/icons-vue'
export default {
  components: {
    Search,
    Plus,
  },
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        major: '',
        department: '',
      },
      //总条数
      total: 0,
      list: [],
    }
  },
  methods: {
    resetParamsAndLoad() {
      this.params.pageNo = 1
      this.loadMajorList()
    },
    async loadMajorList() {
      let { total, list } = await selectMajorList(this.params)
      ;((this.total = total), (this.list = list))
    },
    async removemajorById(major_id) {
      await deleteMajorList({
        major_id,
      })
      //更新课程列表数据
      await this.loadMajorList()
    },
  },
  created() {
    this.loadMajorList()
  },
}
</script>

<template>
  <div class="tools">
    <div class="search">
      <el-input
        class="offset"
        placeholder="专业关键字"
        size="small"
        clearable
        v-model="params.major"
      ></el-input>
      <el-input
        class="offset"
        placeholder="系名关键字"
        size="small"
        clearable
        v-model="params.department"
      ></el-input>

      <el-button type="primary" class="offset" @click="resetParamsAndLoad">
        <el-icon>
          <Search></Search>
        </el-icon>
        <span>查询</span>
      </el-button>
    </div>
    <el-button type="success" size="default">
      <el-icon><Plus></Plus></el-icon>
      <span>新增</span>
    </el-button>
  </div>
  <el-table border stripe :data="list">
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column label="专业名" prop="major_name"></el-table-column>
    <el-table-column label="所属系名" prop="department_name"></el-table-column>
    <el-table-column label="操作" width="120" #default="{ row }">
      <el-button type="primary" size="small" link>编辑</el-button>
      <el-popconfirm title="是否删除当前课程" #reference @confirm="removeMajorById(row.class_id)">
        <el-button type="danger" size="small" link>删除</el-button>
      </el-popconfirm>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:page-size="params.pageSize"
    v-model:current-page="params.pageNo"
    :page-sizes="[5, 10, 20, 40, 60]"
    layout="total, sizes, prev, pager, next, jumper"
    background
    size="small"
    :total="total"
    @current-change="loadMajorList"
    @size-change="loadMajorList"
  >
  </el-pagination>
</template>

<style scoped>
.tools {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.search {
  display: flex;
  flex-flow: row nowrap;
}
.offset {
  width: 160px;
  margin-right: 10px;
}
.el-table {
  margin-top: 16px;
}
.el-tag {
  width: 100%;
}
.el-pagination {
  margin-top: 16px;
  justify-content: center;
}
</style>
